<template>
  <div style="padding: 18px;text-align: center;">
    <div style="display: flex;">
      <img width="120px" height="120px"  :src="avatarUrl" class="avatar"/>
      <div style="padding-left: 20px;min-width: 300px;">
        <input v-model="userName" placeholder="请输入用户名"/>
        <br/>
        <input v-model="userPwd" placeholder="请输入密码"/>
        <br/>
      </div>
    </div>
    <a @click="createSupport" class="btn btn-info btn-block" style="margin-top: 20px;">
      创建客服
    </a>
  </div>
</template>

<script>
  export default {
    name: 'Structure',
    data () {
      return {
        userName:'',
        userPwd:'',
        avatarUrl:'/imgs/default.png'
      }
    },
    props: ["group"],
    methods: {
      createSupport:function () {
        const that = this;
        $.post('/group/user/register',{groupId:this.group.id,avatar:this.avatarUrl,userName:this.userName,userPwd:this.userPwd},function (result) {
          that.$emit('addSupportSuccess', result);
        });
      }
    },
    mounted(){
      const that = this;
      $('.avatar').QiniuUpload({
        key: 'athena-support',
        callback: function (evt, result) {
          that.avatarUrl = that.as.getImageUrl() + result.key;
        }
      }, '/upload/token?bucket=athena-support&key=');
    },
  }
</script>

<style scoped>
  .avatar{
    border: 3px solid #f7f7f7;
    border-radius: 50%;
  }
  input{
    width: 100%;border: none;outline: none;font-size: 14px;padding: 8px;border-bottom: 1px solid #f3f3f3;
  }
  input:focus{
    border-bottom: 1px solid rgba(65, 161, 183, 0.5);

  }
</style>
